<template>
  <div class="box">
    <div class="btnLis">
       <div class="fenshi" @click="addFenshi"></div>
    </div>
    <div class="txtArea" contenteditable="true" ref="txtArea" @click="getRange">asd</div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.MQ = MathQuill.getInterface(2);
  },
  methods: {
    getRange() {
      this.range = window.getSelection().getRangeAt(0); //找到焦点位置
      console.log(this.range);
    },
    addFenshi() {
      if (this.range == null) {
        this.$message("请选取插入地点");
        return;
      }
      let itemBox = document.createElement("span");
      var span = document.createElement("span");

      var mathField = this.MQ.MathField(span, []);
      // mathField.latex('\\sqrt{}'); // Renders the given LaTeX in the MathQuill field \\nthroot3{}
      // mathField.latex('\\nthroot3{}'); // Renders the given LaTeX in the MathQuill field \\nthroot3{}
      mathField.latex("\\frac00"); // Renders the given LaTeX in the MathQuill field \\nthroot3{}
      mathField.latex("\\^{}/_{}"); // Renders the given LaTeX in the MathQuill field \\bar{x}
      mathField.latex("\\bar{x}1"); // Renders the given LaTeX in the MathQuill field \\nthroot'
      mathField.latex("\\nthroot3{}"); // Renders the given LaTeX in the MathQuill field \\nthroot'\\sum^{}_{n=}
      mathField.latex("\\sum^{}_{n=}"); // Renders the given LaTeX in the MathQuill field \\nthroot'
      mathField.latex("\\sum"); // Renders the given LaTeX in the MathQuill field \\nthroot'\\log_{}\\left(\\right)
      mathField.latex("\\log_{}\\left(\\right)"); // Renders the given LaTeX in the MathQuill field \\nthroot'\\ln
      mathField.latex("\\ln"); // Renders the given LaTeX in the MathQuill field \\nthroot'\\times

      mathField.latex("\\sigma"); // Renders the given LaTeX in the MathQuill field \\nthroot'
      mathField.latex();
      //   span.style = "
      //   span.style = "display:inline-block;min-width:20px;height:40px;border:1px solid #666;padding:3px;font-size:12px;"
      //   span.innerHTML = `
      //         <div contenteditable="true" style="height:50%;border-bottom:1px solid #111"></div>
      //         <div contenteditable="true" style="height:50%;"></div>
      //    `;
      itemBox.append(span);
      itemBox.innerHTML += "&nbsp;";
      console.log(itemBox);
      this.range.insertNode(itemBox); //在焦点插入节点
    }
  }
};
</script>
<style lang="scss" scoped>
.mathquill-editable,
.mathquill-rendered-math,
.mathquill-rendered-math .cursor,
.mathquill-rendered-math .underline,
.mathquill-rendered-math .overline,
.mathquill-rendered-math .font,
.mathquill-rendered-math sup,
.mathquill-rendered-math sub,
.mathquill-rendered-math .sup,
.mathquill-rendered-math .sub,
.mathquill-rendered-math .fraction,
.mathquill-rendered-math .large-operator,
.mathquill-rendered-math .sqrt-prefix,
.mathquill-rendered-math .sqrt-stem,
.mathquill-rendered-math .paren,
.mathquill-rendered-math .array,
.mathquill-rendered-math .block {
  display: -moz-inline-box;
  display: inline-block;
  padding-top: 0.075em;
}
.mathquill-editable,
.mathquill-rendered-math {
  cursor: text;
  font-family: Symbola, "Times New Roman", serif;
}
.mathquill-editable,
.mathquill-embedded-latex .mathquill-editable {
  border: 1px solid gray;
  padding: 2px;
}
.mathquill-rendered-math {
  font-variant: normal;
  font-weight: normal;
  font-style: normal;
  font-size: 130%;
  line-height: 1;
}
.box {
  height: 900px;
  background: white;
  .txtArea {
  }
  .btnLis {
    .fenshi {
      width: 26px;
      height: 26px;
      background: url(http://hmwx.wdexam.com/Public/Home/img/examTp/cpa/function.gif);
      background-position: 30px 60px;
      cursor: pointer;
    }
  }
}
</style>
